/**
 *  @name BarChart
 * @desc 柱状图
 * */
import React, { Component } from "react"
import echarts from "echarts/lib/echarts"
// 引入柱状图
import "echarts/lib/chart/bar"
// 引入提示框和标题组件
import "echarts/lib/component/tooltip"
import "echarts/lib/component/title"

import "./styles.css"
class BarChart extends Component {
  state = { buffer: [], nowId: "" }

  myChart = null
  componentDidMount() {
    this.init()
  }

  //id改变则重新渲染（buffer,data为数据改变，可自行选择）
  componentDidUpdate() {
    const { buffer = [], nowId } = this.state
    const { data = [], ids } = this.props
    // const _buffer = JSON.stringify(buffer)
    // const _data = JSON.stringify(data)

    if (nowId !== ids) {
      this.init()
      this.setState({ nowId: ids })
    }
  }

  init = () => {
    const { ids } = this.props
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById(ids))
    // 绘制图表
    this.updateData()
    this.myChart.resize()
  }

  updateData = () => {
    const { data } = this.props

    this.myChart.setOption({
      // color: ['#3398DB'],
      tooltip: {
        // trigger: 'axis',
        trigger: "item",
        formatter: "{b} : {c}%",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        show: false,
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },

      xAxis: [
        {
          type: "category",
          data: ["优秀", "良好", "中等", "合格", "不合格"],
          // 坐标轴 轴线
          axisLine: {
            show: false
          },
          // 坐标轴 刻度
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#666",
            fontSize: 15
          } // 坐标轴标签
        }
      ],
      yAxis: [
        {
          minInterval: 1,
          name: "百分比",
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#333"
          },
          //坐标轴标签
          axisLabel: {
            show: true,
            color: "#666",
            fontSize: 15
          },
          type: "value",
          axisLine: {
            // 坐标轴 轴线
            show: true, // 是否显示
            //  -----   箭头 -----
            symbol: ["none", "arrow"], // 是否显示轴线箭头
            symbolSize: [8, 8], // 箭头大小
            symbolOffset: [0, 7], // 箭头位置

            // ----- 线 -------
            lineStyle: {
              color: "#d9d9d9",
              width: 1,
              type: "solid"
            }
          }, // gird 区域中的分割线
          splitLine: {
            show: false
          }
        }
      ],
      series: [
        {
          name: "直接访问",
          type: "bar",
          barWidth: "60%",
          data: data,
          label: {
            show: true,
            position: "top",
            color: "#333",
            fontSize: 18
          },
          itemStyle: {
            normal: {
              // color:['#86CB78','#85B3FF','#FFCF84','#FFA518','#FF635E'],
              color: function(params) {
                //首先定义一个数组
                let colorList = ["#86CB78", "#85B3FF", "#FFCF84", "#FFA518", "#FF635E"]
                return colorList[params.dataIndex]
              }
            }
          }
        }
      ]
    })
  }

  render() {
    const { ids } = this.props
    return <div id={ids} className="chart"></div>
  }
}
export default BarChart
